<script setup lang="ts" name="Recharge">
import { showNotify } from "vant";
import { copy } from "@/utils";
import API from "@/api";

const { t } = useI18n();
const global: any = getCurrentInstance()?.appContext.config.globalProperties;
const router = useRouter();
const data: any = reactive({
  currentChannelId: 1,
  channelList: [],
  moneyIndex: null,
  rechargeForm: {
    money: "",
    phone: "",
  },
});

const {
  currentChannelId,
  channelList,
  moneyIndex,
  rechargeForm,
} = toRefs(data);

const moneyValidator = (val: number) => {
  if (!val) {
    return t("recharge.test16");
  } else if (
    val < currentchannelItem.value?.minMoney ||
    val > currentchannelItem.value?.maxMoney
  ) {
    return t("recharge.test17")
      .replace("*", currentchannelItem.value?.minMoney)
      .replace("#", currentchannelItem.value?.maxMoney);
  } else {
    return true;
  }
};

const phoneValidator = (val: number) => {
  if(!val) {
    return t('recharge.test18')
  } else {
    return true;
  }
}
const getChannelInfo = () => {
  API.investListAPI({}).then((res:any) => {
      if (res?.code === 200) {
        channelList.value = res.data.map((item:any) => {
          return{
            ...item,
            quickPayTerm:item.quickPayTerm.split(',')
          }
        })

        currentChannelId.value = channelList.value[0].id
      }
    });
}
getChannelInfo()
const handleChannle = (item: any) => {
  currentChannelId.value = item.id;
};
const currentchannelItem = computed(() => {
  return channelList.value.find((it: any) => it?.id == currentChannelId.value);
});
const inputMoneyInterval = computed(() => {
  return (
    currentchannelItem.value?.minMoney +
    " - " +
    currentchannelItem.value?.maxMoney
  );
});
const handleMoney = (item: any, index: number) => {
  moneyIndex.value = index;
  rechargeForm.value.money = item;
};
const onSubmit = (values: any) => {
  let params = {
    payAmount: values.money,
    phone: values.phone,
  };
  let newTabRef = window.open('about:blank');
  API.goPayRecharge(params).then((res: any) => {
    if (res?.code === 200) {
      if (newTabRef) {
        newTabRef.location = res?.data;
      }
    }
  });
};
</script>

<template>
  <div class="rechargePage">
    <DetailHeader
      :title="t('recharge.title1')"
      bg="transparent"
      :isNeedBackIcon="true"
    />
    <div class="channelContainer">
      <div
        class="channelItem"
        v-for="(item, index) in channelList"
        @click="handleChannle(item)"
        :class="{ active: currentChannelId == item.id }"
      >
        {{ item.investChannel }}
      </div>
    </div>
    <BalanceBanner />
    <div class="chooseRechargeMoney">
      <van-form @submit="onSubmit" label-align="top" :v-model="rechargeForm">
        <van-field
          v-model="rechargeForm.phone"
          class="myfield"
          type="tel"
          name="phone"
          style="line-height: 36rem"
          required
          :rules="[{ validator: phoneValidator }]"
          :label="t('withdraw.test14')"
        />
        <van-field
          v-model="rechargeForm.money"
          class="myfield"
          type="number"
          name="money"
          style="line-height: 36rem"
          required
          :rules="[{ validator: moneyValidator }]"
           :label="t('recharge.test19')"
          :placeholder="inputMoneyInterval"
        />
        <div class="amountWrap">
          <div class="title">{{ t("recharge.test1") }}</div>
          <div class="amountList">
            <div
              v-for="(el, index) in currentchannelItem?.quickPayTerm"
              @click="handleMoney(el, index)"
              :class="{ active: moneyIndex == index }"
              :key="index"
            >
              {{ el }}
            </div>
          </div>
        </div>
        <div class="rechargeWrap">
          <van-button round block type="primary" native-type="submit">
            {{ t("recharge.btn1") }}
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- <div class="order" @click="goRecord">{{ t("recharge.btn2") }} ></div> -->
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
